<template>
  <div class="one">
    <el-container>
      <el-main class="main1">
        <el-row :gutter="10">
          <el-col :span="24">
            <h2>
              <img
                class="title"
                :src="res.youhaohuo.title.pic"
                :alt="res.youhaohuo.title.h2"
              /><small>{{ res.youhaohuo.title.small }}</small>
            </h2>
            <el-row :gutter="10">
              <el-col
                :span="4"
                v-for="(item, index) in res.youhaohuo.pics"
                :key="index"
              >
                <a href="#"><img class="pic" :src="item.src" alt="" /></a>
                <h4><a href="#">{{ item.h4 }}</a></h4>
                <p><a href="#">{{ item.p }}</a></p>
                <small class="good"><a href="#">{{ item.good }}</a></small>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

      </el-main>
    </el-container>

    <el-container>
      <el-main class="main2">
        <el-row :gutter="10">
          <el-col class="xxc"> 
            <h2>
              {{ res.remaidanpin.h2 }}
            </h2>
                <a href="#" v-for="(item, index) in res.remaidanpin.lists"
                :key="index">{{ item.list }}</a>
              </el-col>
          <el-col :span="24">
            
              
            <el-row :gutter="10" class="hover">
              <el-col
                :span="4-8"
                v-for="(item, index) in res.remaidanpin.pics"
                :key="index"
                class="kuan"
              >
                <a href="#"><img :src="item.src2" alt="" /></a>
                <span class="price"><a href="#">{{ item.price }}</a></span>
                <span class="xiao"><a href="#">{{ item.xiao }}</a></span>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

      </el-main>
    </el-container>
  </div>

 
</template>

<script>
let dataSource = {
  remaidanpin:{
    h2:"热卖单品",
    lists:[
      {
        list:"项链"
      },
      {
        list:"粉底"
      },
      {
        list:"mac"
      },
      {
        list:"女装"
      },
      {
        list:"男手表"
      },
      {
        list:"牙膏"
      },
      {
        list:"拖鞋"
      },
      {
        list:"iphone"
      },
      {
        list:"运动鞋"
      },
      {
        list:"新款外套"
      },
      {
        list:"床垫"
      },
      {
        list:"电动牙刷"
      },
      {
        list:"zara"
      },
      {
        list:"手机壳"
      },
      {
        list:"睡衣"
      },
      {
        list:"女秋装"
      },
      {
        list:"香水"
      },
      {
        list:"女衬衣"
      },
      {
        list:"男裤"
      },
      {
        list:"女内衣"
      },
      {
        list:"项链女"
      },

      {
        list:"外套"
      },
      {
        list:"男拖鞋"
      },
      {
        list:"洗发水"
      },
    ],
    pics:[
      {
        src2:require("../assets/one/rm-1.webp"),
        link: "",
        price:"89",
        xiao:"月销3596笔"
      },
      {
        src2:require("../assets/one/rm-2.webp"),
        link: "",
        price:"89",
        xiao:"月销3596笔"
      },
      {
        src2:require("../assets/one/rm-3.webp"),
        link: "",
        price:"89",
        xiao:"月销3596笔"
      },
      {
        src2:require("../assets/one/rm-4.webp"),
        link: "",
        price:"89",
        xiao:"月销3596笔"
      },
      {
        src2:require("../assets/one/rm-5.webp"),
        link: "",
        price:"89",
        xiao:"月销3596笔"
      },
      {
        src2:require("../assets/one/rm-5.webp"),
        link: "",
        price:"89",
        xiao:"月销3596笔"
      },
      {
        src2:require("../assets/one/rm-5.webp"),
        link: "",
        price:"89",
        xiao:"月销3596笔"
      },
      {
        src2:require("../assets/one/rm-5.webp"),
        link: "",
        price:"89",
        xiao:"月销3596笔"
      },
      {
        src2:require("../assets/one/rm-5.webp"),
        link: "",
        price:"89",
        xiao:"月销3596笔"
      },
      {
        src2:require("../assets/one/rm-5.webp"),
        link: "",
        price:"89",
        xiao:"月销3596笔"
      },
    ]
  },

  youhaohuo: {
    title: {
      pic: require("../assets/one/title.png"),
      h2: "有好货",
      small: "与品质生活不期而遇",
    },
    pics: [
      {
        h4: "大豆家 方头奶奶鞋",
        p: "一脚蹬设计，方便日常",
        good: "3758 人说好",
        link: "",
        src: require("../assets/one/img1.webp"),
      },
      {
        h4: "佳宝路转角水槽",
        p: "304不锈钢，表面光洁坚固",
        good: "123 人说好",
        link: "",
        src: require("../assets/one/img2.webp"),
      },
      {
        h4: "肖优秀真皮细高跟过膝",
        p: "细跟尖头设计更显优雅女",
        good: "68 人说好",
        link: "",
        src: require("../assets/one/img3.webp"),
      },
      {
        h4: "好利来黑天鹅蛋糕",
        p: "材料新鲜分量足，奶香",
        good: "8 人说好",
        link: "",
        src: require("../assets/one/img4.webp"),
      },
      {
        h4: "汽车盲点变道辅助系",
        p: "行车安全盲区监测系统",
        good: "24 人说好",
        link: "",
        src: require("../assets/one/img5.webp"),
      },
      {
        h4: "PUMA芥末绿复古老爹鞋",
        p: "芥末绿色的鞋面视觉上给",
        good: "7 人说好",
        link: "",
        src: require("../assets/one/img6.webp"),
      },
    ],
  },

};

export default {
  data() {
    return {
      res: dataSource,
    };
  },
};
</script>

<style scoped>
*{
  text-decoration: none;
  color: #000;
}

.one{
  width: 1300px;
  margin: auto;
    /* background:#fff; */
}

h2 img{
  width: 72px;
  height: 24px;
}

h2 small{
  font-size: 10px;
  position: relative;
  top: -6px;
  left: 10px;
  color: #6d6d6d;
  font-weight: 300;
}

h4{
  font-size: 16px;
  font-weight: 400;
  margin-top: -1px;
}

p{
  font-size: 14px;
  margin-top: -15px;
}

p a{
  color: #999;
}

.good a{
  color: #35b1ff;
}
.main1{
  background: rgb(255, 255, 255);
}


.pic2 img{
  width: 197px;
  height: 197px;
}

.xxc{
  /* list-style: none; */
  /* float: left; */
  display: inline-block;
}

.xxc a{
  display: inline-block;
  margin: 4px;
}

.main2{
  background: #fff;
  margin-top: 10px;
}

.kuan{
  width: 20%;
}

.xxc a{
  color: #999;
  font-size: 14px;
}

.xxc h2{
  border-left: 5px solid orange;
  width: 130px;
  text-align: center;
  color: orange;
  font-weight: 400;
  font-size: 20px;
}



</style>